<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-03-04 14:20:59
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-15 11:09:08
 * @FilePath: \ycq\ycq1.0\src\pages\manager\animalManager.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div>
      <div class="header">
        <a-select
          v-model:value="valueSlect"
          label-in-value
          style="
            width: 180px;
            border-radius: 1px !important;
            margin-right: 80px;
          "
          :options="options"
          @change="handleChange"
        />
        <!-- Modal -->
        <a-button type="primary" @click="showModal">新增</a-button>

        <a-modal
          v-model:open="open"
          :title="animalNumber ? '修改动物信息' : '添加动物信息'"
          @ok="handleOk"
          ok-text="确定"
          cancel-text="取消"
        >
          <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            :rules="rules"
            ref="formRef"
            style="width: 400px"
          >
            <a-form-item label="通知详情" name="animalDetails">
              <a-textarea v-model:value="formState.animalDetails" />
            </a-form-item>
            <a-form-item label="通知模块" name="animalDetails">
              <a-radio-group v-model:value="value">
                <a-radio :value="1">最新消息</a-radio>
                <a-radio :value="2">小常识</a-radio>
                <a-radio :value="3">领养须知</a-radio>
                <a-radio :value="4">关于我们</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
      <div class="userTable">
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="pagination"
          @change="handleTableChange"
          :row-selection="rowSelection"
        >
          <template #bodyCell="obj">
            <div v-if="obj.column.dataIndex === 'animalStatus'">
              {{ getAnimalStatus(obj.record.animalStatus) }}
            </div>
            <div v-if="obj.column.dataIndex === 'todo'">
              <a-button @click="() => handleUpdata(obj.record.animalNumbers)"
                >修改</a-button
              >
              <a-button @click="() => handleDelete(obj.record.animalNumbers)"
                >删除</a-button
              >
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
import {
  getAllAnimals,
  deleteAnimals,
  updataAnimals,
  addAnimals,
  getAnimalById,
  upload,
  download,
} from "@/service/api.js";
const value = ref(1);
const pagination = ref({
  current: 1,
  total: 0,
  pageSize: 10,
  showTotal: (total) => `共 ${total} 条数据`,
  showQuickJumper: true,
});
const valueSlect = ref({
  value: 5,
  label: "全部",
});
const options = ref([
  {
    value: 5,
    label: "全部",
  },
  {
    value: 1,
    label: "启用",
  },
  {
    value: 0,
    label: "停用",
  },
]);
const dataSource = ref([]);
const open = ref(false);
const formState = ref({
  animalName: "",
  animalAge: null,
  breed: "",
  animalDetails: "",
  animalStatus: null,
});
const animalNumber = ref(null);

const columns = ref([
  {
    title: "动物编号",
    dataIndex: "animalNumbers",
    align: "center",
  },
  {
    title: "动物名称",
    dataIndex: "animalName",
    align: "center",
  },

  {
    title: "动物年龄",
    dataIndex: "animalAge",
    align: "center",
  },
  {
    title: "品种",
    dataIndex: "breed",
    align: "center",
  },
  {
    title: "动物详情",
    dataIndex: "animalDetails",
    align: "center",
  },
  {
    title: "动物状态",
    dataIndex: "animalStatus",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "todo",
    align: "center",
  },
]);

const getAllAnimal = async () => {
  const res = await getAllAnimals({
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
  });
  if (res.code === 1) {
    dataSource.value = res.data.records;
    pagination.value.total = res.data.total;
  }
};
getAllAnimal();

const handleChange = (value) => {
  console.log(value);
};
//添加
const showModal = () => {
  open.value = true;
};

//修改
const handleUpdata = async (animalNum) => {
  open.value = true;
  animalNumber.value = animalNum;
  //回显
  const res = await getAnimalById({
    animalNumber: animalNum,
  });
  console.log(res);
};
//删除
const handleDelete = async (animalNumbers) => {
  console.log(animalNumbers);
  const res = await deleteAnimals({ animalNumbers });
  console.log(res);
  if (res.code === 1) {
    message.success("删除成功");
    getAllAnimal();
  } else message.error("删除失败");
};

//添加/修改
const handleOk = async (e) => {
  console.log(e);
  if (animalNumber.value) {
    // 修改
    const res = await updataAnimals({
      ...formState.value,
      animalNumbers: animalNumber.value,
      animalImage: fileName.value,
    });
    console.log(res);
    // 修改成功
    animalNumber.value = null;
    formState.value = {};
    open.value = false;
    getAllAnimal();
  } else {
    //添加
    const add = await addAnimals({
      ...formState.value,
      animalImage: fileName.value,
    });
    console.log(add);
    if (add.code === 1) {
      message.success(add.data);
      pagination.value.current = 1;
      getAllAnimal();
      formState.value = {};
      open.value = false;
    } else message.error("新增失败");
  }
};

const handleTableChange = (pageObj) => {
  console.log(pageObj);
  pagination.value = pageObj;
  getAllAnimal();
};
</script>
<style scoped>
.header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
  padding: 12px;
  .search-input {
    padding-left: 8px;
    border: none;
    background-color: #dddddd;
    border-radius: 25px;
    float: right;
    width: 200px;
  }
  .search {
    position: relative;
    height: 30px;
    right: 30px;
    top: 8px;
  }
}
</style>
